---
interface Props {
  title: string;
  inputId: string;
  icon?: string;
  description?: string;
}

const { title, inputId, icon, description } = Astro.props;
---

<div class="content-entry">
  <div>
    {icon && <img src={icon} alt={title} />}
    <div>
      <h1>{title}</h1>
      {description && <p>{description}</p>}
    </div>
  </div>
  <div class="checkbox-wrapper">
    <span class="indicator" id={`indicator-${inputId}`}>Off</span>
    <label class="switch">
      <input id={inputId} type="checkbox" />
      <span class="slider"></span>
    </label>
  </div>
</div>
